<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple 网站</title>
    <style>
        body{
            font-family:  Arial,sans-serif;
            margin: 0;
            padding: 0;
        }
        .container{
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        h1{
            text-align: center;
            font-size: 28px;
            margin-bottom: 20px;
        }
        .divider{
            height: 3px;
            background-color: #4CAF50;
            margin: 20px 0;
        }
        .product-grid{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .product-item{
            width: 23%;
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
        }
        .product-item img{
            max-width: 100%;
            height: auto;
            border: 1px solid#ddd;
        }
        .product-item p{
            margin: 10px 0;
            font-size: 14px;
        }
        .product-item a{
            text-decoration: none;
            color: #000;
            display: block;
        }
        .product-item a:hover {
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Apple 网站</h1>
        <div class = "divider"></div>
        <div class ="product-grid">
            <!-- iPhone 5 -->
         <div class="product-item">
            <a href="http://www.apple.com.cn/iphone/" target="_blank">
               <div class="product-content">
                <p>iPhone 5</p>
                <p>iPhone 问世以来，<br>一次极其重大的飞跃</p>
                <img src="ipadblankl. gif " alt="iPhone 5">
               </div>
            </a>
         </div>
         <!-- iPad -->
          <div class="product-item">
            <a href="http://www.apple.com.cn/iphone/" target="_bank">
                <div class="product-content">
                    <p>iPad</p>
                    <p>配备Retina显示屏<br>2倍的性能表现、更快的WLAN网络和<br>全新FaceTime HD高清摄像头。</p>
                    <img src="ipadblank2. gif " alt="iPad">
                </div>
            </a>
          </div>
          <!-- MacBook Pro -->
           <div class="product-item">
            <a href="http://www.apple.com.cn/macbook-pro/" target="_blank">
                <div class="product-content">
                   <p>macbook Pro</p>
                   <p>配备13英寸Retina显示屏</p>
                   <img src="ipadblank3. gif" alt="MacBook Pro">
                </div>
            </a>
           </div>
           <!-- 供应商责任 -->
            <div class="product-item">
                <a href="http://www.apple.com.cn/supplierresponsibility/" target="_blank">
                    <div class="product-content">
                        <p>供应商责任</p>
                        <p>我们为确保工作场所符合<br>健康标准与道德规范所做的最新努力</p>
                        <img src="ipadblank4. gif" alt="供应商责任">
                    </div>
                </a>
            </div>
        </div>
        <div class="divider"></div>
    </div>
</body>
</html>